<template>
  <div>
    <el-button type="primary" @click="addhandle">添加</el-button>
    <el-table :data="arr" style="width: 100%">
      <el-table-column label="员工编号" prop="empno" />
      <el-table-column label="员工姓名" prop="ename" />
      <el-table-column label="职位" prop="job" />
      <el-table-column label="入职日期" prop="hiredate" />
      <el-table-column label="薪资" prop="sal" />
      <el-table-column label="部门编号" prop="deptno" />

      <el-table-column align="right">
        <!-- 搜索框 -->
        <template #header>
          <el-input v-model="search" @keyup.enter="find" size="small" placeholder="按照姓名搜索" />
        </template>
        <!-- 搜索框 -->

        <!-- 两个按钮的插槽 -->
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="warning" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
        <!-- 两个按钮的插槽 -->
      </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10]" :size="size"
      :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="17"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    当前页码 {{ currentPage4 }}
    每页数据条数 {{ pageSize4 }}
    <!-- 删除有关对话框 -->
    <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
      <span>是否删除</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteData">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 删除有关对话框 -->

    <!-- 编辑对话框 -->
    <el-dialog v-model="centerDialogVisible" title="Warning" width="500" align-center>

      <el-form :model="emp">
        <el-form-item label="员工编号" :label-width="formLabelWidth">
          <el-input v-model="emp.empno" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="emp.ename" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工职位" :label-width="formLabelWidth">
          <el-input v-model="emp.job" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入职日期" :label-width="formLabelWidth">

          <el-date-picker v-model="emp.hiredate" type="date" value-format="YYYY-MM-DD" placeholder="Pick a day"
            :size="size" />
        </el-form-item>
        <el-form-item label="员工工资" :label-width="formLabelWidth">
          <el-input v-model="emp.sal" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门编号" :label-width="formLabelWidth">
          <el-select v-model="emp.deptno" placeholder="Select" style="width: 240px">
            <el-option v-for="(item, index) in dept" :key="index" :label="item.deptno" :value="item.deptno" />
          </el-select>
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="edit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑对话框 -->

    <!-- 添加对话框 -->
    <el-dialog v-model="addDialogVisible" title="Warning" width="500" align-center>

      <el-form :model="addEmp">

        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="addEmp.ename" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工职位" :label-width="formLabelWidth">
          <el-input v-model="addEmp.job" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入职日期" :label-width="formLabelWidth">

          <el-date-picker v-model="addEmp.hiredate" type="date" value-format="YYYY-MM-DD" placeholder="Pick a day"
            :size="size" />
        </el-form-item>
        <el-form-item label="员工工资" :label-width="formLabelWidth">
          <el-input v-model="addEmp.sal" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门编号" :label-width="formLabelWidth">
          <el-select v-model="addEmp.deptno" placeholder="Select" style="width: 240px">
            <el-option v-for="(item, index) in dept" :key="index" :label="item.deptno" :value="item.deptno" />
          </el-select>
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加对话框 -->

  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import qs from "qs"
import { ElMessage } from 'element-plus'


const size = ref('default') // 分页组件尺寸
const disabled = ref(false) // 分页是否禁用
const background = ref(true) // 分页背景是否显示
const currentPage4 = ref(1) // 当前默认页码
const pageSize4 = ref(5)    // 初始每页数据条数


let arr = ref([])
let arrLength = ref(0)
const centerDialogVisible = ref(false)
const dialogVisible = ref(false)
const addDialogVisible = ref(false)

//搜索框
let search = ref('')
const find = () => {

  console.log(search.value)

  init()
}

let init = () => {
  console.log("当前页码：", currentPage4.value); // 应输出 1、2 等数字
  console.log("每页条数：", pageSize4.value);   // 应输出 5、10 等数字
  axios.get(`http://localhost:8080/test-servlet/empList?currentPage=${currentPage4.value}&pageSize=${pageSize4.value}&ename=${search.value}`)
    .then((res) => {
      console.log(res)
      arr.value = res.data.empList
      arrLength.value = res.data.totalCount

    })
}
onMounted(() => {
  init()
})


//查询
let dept = ref([])
let getDept = () => {
  axios.get("http://localhost:8080/test-servlet/getDept")
    .then((res) => {
      console.log(res)
      dept.value = res.data

    })
}

// 编辑
let emp = ref({}) // 记录点击编辑按钮之后的那行数据

const handleEdit = (index, row) => {
  centerDialogVisible.value = true
  console.log(index, row)
  getDept()
  emp.value = row
}
// 编辑（后台）
let edit = () => {

  axios.post(`http://localhost:8080/test-servlet/emit`, qs.stringify(emp.value))
    .then((res) => {
      if (res.data != null) {
        ElMessage({
          message: '修改成功.',
          type: 'success',
        })
        centerDialogVisible.value = false  // 隐藏对话框
        init()
      } else {
        ElMessage.error('修改失败.')
        centerDialogVisible.value = false  // 隐藏对话框
        init()
      }
    })
}

//添加

let addEmp = ref({})

const addhandle = () => {
  addDialogVisible.value = true
  getDept()
}

let add = () => {
  axios.post(`http://localhost:8080/test-servlet/addEmp`, qs.stringify(addEmp.value))
    .then((res) => {
      if (res.data != null) {
        ElMessage({
          message: '添加成功.',
          type: 'success',
        })
        addDialogVisible.value = false  // 隐藏对话框
        init()
      } else {
        ElMessage.error('添加失败.')
        addDialogVisible.value = false  // 隐藏对话框
        init()
      }
    })
}

// 删除
let deleteData = () => {
  axios.get(`http://localhost:8080/test-servlet/del?empno=${empno.value}`)
    .then((res) => {
      console.log(res)
      if (res.data == 1) {
        ElMessage({
          message: '删除成功.',
          type: 'success',
        })
        init()
        dialogVisible.value = false
      } else {
        ElMessage.error('删除失败.')
        init()
        dialogVisible.value = false
      }
    })
}

let empno = ref(0)
// 删除
const handleDelete = (index, row) => {
  dialogVisible.value = true
  console.log(index, row)
  console.log(row.empno)
  // deleteData(row.empno)
  empno.value = row.empno
}


const handleSizeChange = (val) => {
  console.log(`${val}条数据每页`)
  pageSize4.value = val  // 每切换每页显示数据条数，就更改pageSize4
  init()
}
const handleCurrentChange = (val) => {
  console.log(`当前页码: ${val}`)
  currentPage4.value = val
  init()
}

</script>